<template>
  <div class="satisfactionReportContainer">
    <el-table
      :max-height="maxheight"
      :data="tableData"
      style="width: 100%"
      border
      stripe
    >
      <el-table-column prop="month" label="月份" fixed> </el-table-column>
      <el-table-column
        prop="transport_score"
        label="运输服务评价"
      ></el-table-column>
      <el-table-column prop="speed_score" label="运输速度评价">
      </el-table-column>
      <el-table-column
        prop="goods_package_score"
        label="货物包装评价"
      ></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="clickDetailDialog(scope.row)"
            >点击查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: end; padding-top: 15px">
      <el-pagination
        background
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="pageNum1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum1"
      >
      </el-pagination>
    </div>

    <el-dialog
      width="1100px"
      title="客户满意度详情"
      :visible.sync="showDetailDialog"
      :close-on-click-modal="false"
    >
      <el-table
        ref="singleTable"
        :data="detailListData"
        highlight-current-row
        style="width: 100%"
        border
        :max-height="400"
      >
        <el-table-column
          prop="customer_area_name"
          label="客户所属区域"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="customer_name"
          label="客户名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="follow_up_time_name"
          label="跟进时间"
          width="150"
        ></el-table-column>
        <el-table-column prop="follow_up_name" label="跟进人"></el-table-column>
        <el-table-column prop="status_name" label="状态"></el-table-column>
        <el-table-column
          prop="create_time_name"
          label="评价时间"
          width="150"
        ></el-table-column>
        <el-table-column prop="feedback_name" label="评价人"></el-table-column>
        <el-table-column
          prop="goods_package_score_name"
          label="货物包装评价"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="speed_score_name"
          label="运输速度评价"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="transport_score_name"
          label="运输服务评价"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="propose"
          label="客户具体感受"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="order_no"
          label="订单号"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="waybill_no"
          label="运单号"
          width="150"
        ></el-table-column>
      </el-table>
      <el-pagination
        background
        style="float: right"
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="pageNum2"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum2"
      >
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">关 闭</el-button>
        <el-button @click="feedderive()" type="primary">导 出</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqSatisfactionList,
  reqSatisfactionDetailList,
  feedbackexport,
} from "@/api/message";
export default {
  name: "satisfactionReport",
  data() {
    return {
      maxheight: "auto",
      tableData: [],
      detailListData: [],
      pageNum1: 1,
      pageSize1: 20,
      totalListNum1: 0,
      pageNum2: 1,
      pageSize2: 20,
      totalListNum2: 0,
      showDetailDialog: false,
      create_time: {
        start_time: "",
        end_time: "",
      },
    };
  },
  mounted() {
    // 获取数据并更新表格
    this.getList();
  },
  methods: {
    async getList() {
      let res = await reqSatisfactionList({
        page: this.pageNum1,
        page_size: this.pageSize1,
      });
      if (res.code === 10000) {
        this.tableData = res.data.data || [];
        if (this.tableData.length > 7) {
          //无操作栏
          this.maxheight = document.documentElement.clientHeight - 205;
        } else {
          this.maxheight = "auto";
        }
        this.pageNum1 = res.data.page * 1;
        this.pageSize1 = res.data.page_size * 1;
        this.totalListNum1 = res.data.total * 1;
      }
    },
    async getInnerList() {
      let res = await reqSatisfactionDetailList({
        page: this.pageNum2 + "",
        page_size: this.pageSize2 + "",
        type: "1",
        create_time: this.create_time,
      });
      if (res.code === 10000) {
        this.detailListData = res.data.data || [];
        this.pageNum2 = res.data.pagination.page * 1;
        this.pageSize2 = res.data.pagination.page_size * 1;
        this.totalListNum2 = res.data.pagination.total * 1;
      }
    },
    handleSizeChange1(val) {
      this.pageSize1 = val; //一页多少条
      this.getList();
    },
    handleCurrentChange1(val) {
      this.pageNum1 = val; //第多少页
      this.getList();
    },
    handleSizeChange2(val) {
      this.pageSize2 = val; //一页多少条
      this.getInnerList();
    },
    handleCurrentChange2(val) {
      this.pageNum2 = val; //第多少页
      this.getInnerList();
    },
    clickDetailDialog(row) {
      this.pageNum2 = 1;
      this.pageSize2 = 20;
      // console.log(row.month, "reqSatisfactionDetailList");
      var date1 = new Date(row.month + "-01T00:00:00");
      var date2 = new Date(row.month + "-01T23:59:59");
      // console.log(date1, "2023-092023-09");
      date2.setMonth(date1.getMonth() + 1);
      date2.setDate(0);
      this.create_time.start_time = (date1.getTime() + "").slice(0, 10);
      this.create_time.end_time = (date2.getTime() + "").slice(0, 10);
      this.getInnerList();
      this.showDetailDialog = true;
    },
    feedderive(type) {
      var param = {
        header_id: 38 + "",
        type: 1 + "",
        create_time: this.create_time,
      };
      feedbackexport(param).then((res) => {
        if (res.code === 10000) {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
          // this.isLoading = false
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.satisfactionReportContainer {
  padding: 10px 15px;
  background-color: #fff;
  // height: 80vh;
}
.operation {
  height: 40px;
  .el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  ::v-deep .el-pagination {
    float: right;
    margin: 0px 0px 0px 20px;
    .el-input--mini .el-input__inner {
      height: 24px;
    }
  }
}
</style>